<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">请假审批</block>
			<view slot="right" style="margin-right: 1em;" @click="addForm = true">
				<text class="iconfont icon-jia" style="margin-right: .2em;"></text>
				新增</view>
		</cu-custom>
		<a-fixed :height="40">
			<a-tabs @click="clickTabs" :row="4" type="border" :value="tabs2">
				<template #filter="{row,index}">
					<text style="color: #000000;" @click.stop="$refs.rightDrawer.open()">筛选</text>
					<text style="font-size: .9em;color: #0062CC;" class="iconfont icon-shaixuan"></text>
				</template>
			</a-tabs>
		</a-fixed>
		<a-scroll :request="get" ref="aScroll" :loadStyle="{background:'transparent'}">
			<template #item="{row:i,index}">
				<view class="card-item" @click="show(i)">
					<g-seal :value="i.$status" class="seal" />
					<view class="title">{{ i.title }}</view>
					<a-cell :row="1" :value="i" :columns="columns" style="position: relative;z-index: 1;min-height: 80rpx;padding:0 12px;" />
					<g-btns :btns="btns" :value="i" />
				</view>
			</template>
			<template #noData>
				没有请假
				<a-button style="min-width: 45vmin;margin-top: 3vmin;" @tap="add">
					<text class="iconfont icon-jia"></text>
					<text style="margin-left: 5px;margin-bottom: .1em;font-size: 18px;">申请</text>
				</a-button>
			</template>
		</a-scroll>
		<!--右抽屉-->
		<uni-drawer :width="360" ref="rightDrawer" mode="right">
			<y-form :keys="filterColumns" v-model="info" @submit="submit" submit-text="确定"></y-form>
		</uni-drawer>
		<!--下抽屉-->
		<a-popup v-model="addForm">
			<y-form :keys="columns" v-model="info" @submit="submit" submit-text="确定"></y-form>
		</a-popup>
	</view>
</template>

<script>
	import gSeal from '@/pages/components/g-seal/g-seal.vue';
	import gBtns from '@/pages/components/g-btns/g-btns.vue';
	import yForm from "@/y-ui/y-form/y-form.vue";
	export default {
		components: {
			gSeal,
			gBtns,
			yForm
		},
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		computed: {
			btns() {
				return [{
					name: '撤销',
					click: ({
						id = ''
					}) => {
						uni.navigateTo({
							url: ''
						});
					},
					style: {
						background: 'linear-gradient(90deg, rgba(255, 85, 127,.8) 0%, rgba(255, 0, 0,.8) 100%)'
					}
				}];
			},
			columns() {
				return [{
					key: "a",
					lable: "申请人：",
					type: "y-input"
				}];
			}
		},
		data() {
			return {
				info: {
					a: 1
				},
				addForm:false,
				tabsParm: {
					name: "全部申请",
					id: "4"
				},
				tabs2: [{
					name: "全部申请",
					id: "4"
				}, {
					name: "我发起的",
					id: "2"
				}, {
					name: "待处理的",
					id: "3"
				}, {
					disabled: true,
					slot: "filter"
				}],
				filterColumns: [{
					key: "a",
					lable: "关键字：",
					type: "y-input"
				},{
					key: "a1",
					lable: "类型：",
					type: "y-input"
				},{
					key: "a2",
					lable: "状态：",
					type: "y-input"
				},{
					key: "a3",
					lable: "开始时间：",
					type: "y-input"
				},{
					key: "a4",
					lable: "结束时间：",
					type: "y-input"
				}]
			}
		},
		methods: {
			get(parm = {}) {
				const data = new Array(15).fill({
					title: "请假申请",
					a: "蒋介石",
					$status: {
						code: "1",
						color: "red",
						title: "完成"
					}
				});
				console.log('请求：' + JSON.stringify({
					...parm,
					...this.tabsParm,
					...this.info
				}));
				return new Promise(r => {
					setTimeout(e => {
						r({
							total: 200,
							data
						})
					}, 1000);
				});
			},
			clickTabs(e) {
				if (e.disabled) return;
				this.tabsParm = e;
				this.$refs.aScroll.get(true);
			},
			submit(e) {
				this.$refs.aScroll.get(true);
				this.$refs.rightDrawer.close();
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f1f1f7;
		height: 100%;
	}

	.add-btn-move {
		position: fixed;
		bottom: calc(0.1vmin + 2em);
		right: auto;
		top: auto;
		left: 2vmin;
		z-index: 100;
	}

	.card-item {
		margin: 20rpx;
		margin-bottom: 0;
		padding: 10rpx 0;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);

		.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-left: 15px;
			line-height: 1.6em;
			font-size: 16px;
			font-weight: 700;
		}

		.seal {
			position: absolute;
			z-index: 0;
			top: 5px;
			right: 5px;
		}
	}
</style>
